dashboard RelationshipsTab.tsx

0% Statements 0/54

0% Branches 0/1

0% Functions 0/1

0% Lines 0/54

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { RelationshipCard } from '@/components/practice/RelationshipCard'
import { css } from '../../../../../styled-system/css'

// ============================================================================
// Types
// ============================================================================

interface RelationshipsTabProps {
  studentId: string
  studentName: string
  isDark: boolean
}

// ============================================================================
// RelationshipsTab
// ============================================================================

export function RelationshipsTab({ studentId, studentName, isDark }: RelationshipsTabProps) {
  return (
    <div
      data-component="relationships-tab"
      className={css({
        display: 'flex',
        flexDirection: 'column',
        gap: '1.5rem',
      })}
    >
      <div>
        <h2
          className={css({
            fontSize: '1.25rem',
            fontWeight: 'semibold',
            color: isDark ? 'gray.100' : 'gray.900',
            marginBottom: '0.25rem',
          })}
        >
          Relationships
        </h2>
        <p
          className={css({
            fontSize: '0.875rem',
            color: isDark ? 'gray.400' : 'gray.500',
          })}
        >
          Parents, classrooms, and other connections for {studentName}
        </p>
      </div>

      <RelationshipCard playerId={studentId} playerName={studentName} editable />
    </div>
  )
}